<template>
    <div class="demo-div">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-tabs>
                <el-tab-pane label="基本信息">
                    <el-form-item label="门店类型" prop="type">
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio label="普通门店" value="0" />
                            <el-radio label="外卖门店" value="1" />
                            <el-radio label="酒店" value="2" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="起送价" v-if="ruleForm.type == '1'">
                        <el-input v-model="ruleForm.minimumDeliveryPrice" placeholder="请输入">
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="门店名称" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="门店电话" prop="phone">
                        <el-input v-model="ruleForm.phone" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="套餐住宿描述" prop="packageAccommodation" v-if="ruleForm.type == '2'">
                        <el-input v-model="ruleForm.packageAccommodation" placeholder="请输入" type="textarea">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="套餐饮食描述" prop="descriptionOfThePackageDiet" v-if="ruleForm.type == '2'">
                        <el-input v-model="ruleForm.descriptionOfThePackageDiet" placeholder="请输入" type="textarea">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="套餐享受权益" prop="packagesEnjoyBenefits" v-if="ruleForm.type == '2'">
                        <el-input v-model="ruleForm.packagesEnjoyBenefits" placeholder="请输入" type="textarea">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="门店详情" prop="storeDetails">
                        <!-- <el-input v-model="ruleForm.storeDetails" placeholder="请输入" type="textarea">
                        </el-input> -->
                        <Wangeditor @closeOK="closeOKstoreDetails" :row="ruleForm.storeDetails">
                        </Wangeditor>
                    </el-form-item>
                    <el-form-item label="门店购买须知" prop="storePurchaseInstructions">
                        <Wangeditor @closeOK="closeOKDataPriceDescription" :row="ruleForm.storePurchaseInstructions">
                        </Wangeditor>
                    </el-form-item>
                    <el-form-item label="房型" v-if="ruleForm.type == '2'">
                        <div style="width: 100%;" class="formItemDiv">
                            <el-button class="mt-4" style="width: 20px;height: 20px;" type="primary" @click="onAddItem"
                                icon="CirclePlus" circle />
                            <el-table :data="ruleForm.roomType" style="width: 100%" max-height="400">
                                <el-table-column prop="roomTypeName" label="房型名称" width="160">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.roomTypeName" placeholder="请输入">
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="roomTypeInventory" label="房型库存" width="160">
                                    <template #default="scope">
                                        <el-input v-model.number="scope.row.roomTypeInventory" placeholder="请输入">
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="roomTime" label="时间" width="250">
                                    <template #default="scope">
                                        <el-date-picker v-model="scope.row.roomTime" type="daterange"
                                            range-separator="To" start-placeholder="开始" end-placeholder="结束"
                                            :size="size" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="roomDescription" label="房型描述" width="160">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.roomDescription" placeholder="请输入">
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="photo" label="图片" width="300">
                                    <template #default="scope">
                                        <Uploads :row="scope.row.photo" @OK="(res) => {
                                            scope.row.photo.push(...res)
                                        }" @removeImg="(res) => {
                                            scope.row.photo = res
                                        }"></Uploads>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="price" label="价格" width="160">
                                    <template #default="scope">
                                        <el-input v-model.number="scope.row.price" placeholder="请输入">
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" label="操作">
                                    <template #default="scope">
                                        <el-button link type="primary" size="small"
                                            @click.prevent="deleteRow(scope.$index)">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-form-item>
                    <el-form-item label="营业日期">
                        <el-checkbox-group v-model="ruleForm.businessDate">
                            <el-checkbox label="星期一" name="type" value="星期一" />
                            <el-checkbox label="星期二" name="type" value="星期二" />
                            <el-checkbox label="星期三" name="type" value="星期三" />
                            <el-checkbox label="星期四" name="type" value="星期四" />
                            <el-checkbox label="星期五" name="type" value="星期五" />
                            <el-checkbox label="星期六" name="type" value="星期六" />
                            <el-checkbox label="星期天" name="type" value="星期天" />
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="营业时间段">
                        <el-time-picker v-model="ruleForm.businessTime" is-range range-separator="至"
                            start-placeholder="开始时间" end-placeholder="结束时间" format="HH:mm" value-format="HH:mm" />
                    </el-form-item>
                    <el-form-item label="扫码枪编号">
                        <el-input v-model="ruleForm.barcodeScannerNumber" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="营业状态" prop="status">
                        <el-switch v-model="ruleForm.status" active-value="0" inactive-value="1" />
                    </el-form-item>
                    <el-form-item label="门店地址">
                        <el-input v-model="ruleForm.address" placeholder="请在地图上搜索" disabled>
                        </el-input>
                        <p style="margin: 0;">地图上搜索</p>
                    </el-form-item>
                    <el-form-item label="经度">
                        <el-input v-model="ruleForm.lon" placeholder="请在地图上搜索" disabled>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="纬度">
                        <el-input v-model="ruleForm.lat" placeholder="请在地图上搜索" disabled>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="地图信息">
                        <mapActions :mapData="mapData" @OKmap="OKmap"></mapActions>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="门店营销设置">
                    <el-form-item label="所属商圈">
                        <el-select v-model="ruleForm.businessName" placeholder="请选择">
                            <el-option :label="item.name" :value="item.name" v-for="(item, index) in options"
                                :key="index" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="评分">
                        <el-input v-model="ruleForm.score" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="人均价格">
                        <el-input v-model="ruleForm.averagePrice" placeholder="请输入">
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="门店描述">
                        <el-input v-model="ruleForm.description" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="优惠信息">
                        <el-input v-model="ruleForm.specialOffers" placeholder="请输入" />
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="设置/相册">
                    <el-form-item label="门店封面">
                        <Upload :row="ruleForm.cover" @OK="OKdata"></Upload>
                    </el-form-item>
                    <el-form-item label="门店视频">
                        <Upload :row="ruleForm.video" @OK="OKdata1"></Upload>
                    </el-form-item>
                    <el-form-item label="门店相册">
                        <!-- <Upload :row="ruleForm.photo" @OK="OKdata2"></Upload> -->
                        <Uploads :row="ruleForm.photo" @OK="OKdata2" @removeImg="removeImg2"></Uploads>
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
            <el-form-item style="position: absolute;bottom: 20px;">
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script setup>
import Wangeditor from '@/components/wangeditor/index.vue'
import Uploads from './elUpload.vue'
import mapActions from '@/components/map/index.vue'
import { listStoresAdd, listStoresUpdate } from '@/api/merchantManagement.js'
import { getBusinessList } from '@/api/merchant.js'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import Upload from '@/components/elUpload/index.vue'
import { useRoute } from 'vue-router';
const deleteRow = (index) => {
    ruleForm.roomType.splice(index, 1)
}

const onAddItem = () => {
    ruleForm.roomType.push({
        roomTypeName: '',
        roomTypeInventory: 0,
        photo: [],
        price: 0,
        roomTime: [],
        roomDescription: '25cm² 1.25单人床 有窗 无宽带'

    })
}
const route = useRoute();
const props = defineProps({
    isAdd: {
        type: Boolean,
        default: false, // 默认值为 false
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
const emit = defineEmits(['closeAdd', 'closeOK'])

// 门店详情
const closeOKstoreDetails = (data) => {
    ruleForm.storeDetails = data
}
// 门店购买须知
const closeOKDataPriceDescription = (data) => {
    ruleForm.storePurchaseInstructions = data
}

const page = reactive({
    name: "",
    pageNum: 1,
    pageSize: 10
})
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
    // 门店类型
    type: '0',
    // 起送价
    minimumDeliveryPrice: '',
    // 门店名称
    name: '',
    // 门店电话
    phone: '',
    // 日期
    businessDate: [],
    // 时间段
    businessTime: [],
    // 扫码枪编号
    barcodeScannerNumber: '',
    // 营业状态
    status: '0',
    // 门店地址
    address: '',
    // 经度
    lon: '',
    // 纬度
    lat: '',
    // 所属商圈
    businessName: '',
    // 评分
    score: '',
    // 人均价格
    averagePrice: '',
    // 门店描述
    description: '',
    // 优惠信息
    specialOffers: '',
    // 门店封面
    cover: '',
    // 门店视频
    video: '',
    // 门店相册
    photo: [],
    // 商家id
    storeId: '',
    // 套餐住宿
    packageAccommodation: '',
    // 套餐饮食
    descriptionOfThePackageDiet: '',
    // 套餐服务
    packagesEnjoyBenefits: '',
    // 门店详情
    storeDetails: '',
    // 门店购买须知
    storePurchaseInstructions: '',
    // 房型
    roomType: [],
})

const rules = reactive({
    type: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    status: [
        { required: true, message: '请输入', trigger: 'change' },
    ],
})
const mapData = reactive(
    {
        // 门店地址
        address: '',
        // 经度
        lon: '',
        // 纬度
        lat: '',
    }
)
const options = reactive([])

// 地图数据
const OKmap = (data) => {
    mapData.address = data.name;
    mapData.lon = data.location?.lng;
    mapData.lat = data.location?.lat;
    ruleForm.address = data.name;
    ruleForm.lon = data.location?.lng;
    ruleForm.lat = data.location?.lat;
}
// 确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                listStoresAdd(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })
            } else {
                listStoresUpdate({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 文件上传门店封面
const OKdata = (url) => {
    ruleForm.cover = url;
}
// 文件上传门店视频
const OKdata1 = (url) => {
    ruleForm.video = url;
}
// 基础设置-商品图
const OKdata2 = (url) => {
    ruleForm.photo.push(...url)
}
// 基础设置-商品图-删除
const removeImg2 = (item) => {
    ruleForm.photo = item

}

const getBusinessListData = () => {
    options.length = 0;
    getBusinessList(page).then(res => {
        if (res.code == 200) {
            options.push(...res.data.records)
        }
    })
}


onMounted(() => {
    getBusinessListData()
    if (route.query) {
        ruleForm.storeId = route.query.id
    }
    if (!props.isAdd) {
        ruleForm.name = props.row.name;
        ruleForm.phone = props.row.phone;
        ruleForm.status = props.row.status;
        ruleForm.address = props.row.address;
        mapData.address = props.row.address;
        let geomObj = {};
        if (props.row.geom) {
            geomObj = JSON.parse(props.row.geom);
        }
        if (geomObj.coordinates) {
            ruleForm.lon = geomObj.coordinates[0];
            ruleForm.lat = geomObj.coordinates[1];
            mapData.lon = geomObj.coordinates[0];
            mapData.lat = geomObj.coordinates[1];
        } else {
            ruleForm.lon = ''
            ruleForm.lat = ''
            mapData.lon = ''
            mapData.lat = ''
        }
        ruleForm.businessName = props.row.businessName;
        ruleForm.score = props.row.score;
        ruleForm.averagePrice = props.row.averagePrice;
        ruleForm.description = props.row.description;
        ruleForm.specialOffers = props.row.specialOffers;
        ruleForm.cover = props.row.cover;
        ruleForm.video = props.row.video;
        ruleForm.photo = props.row.photo;
        ruleForm.businessDate = props.row.businessDate;
        ruleForm.businessTime = props.row.businessTime;
        ruleForm.barcodeScannerNumber = props.row.barcodeScannerNumber;
        ruleForm.minimumDeliveryPrice = props.row.minimumDeliveryPrice;
        ruleForm.packageAccommodation = props.row.packageAccommodation;
        ruleForm.descriptionOfThePackageDiet = props.row.descriptionOfThePackageDiet;
        ruleForm.packagesEnjoyBenefits = props.row.packagesEnjoyBenefits;
        ruleForm.storeDetails = props.row.storeDetails;
        ruleForm.storePurchaseInstructions = props.row.storePurchaseInstructions;
        ruleForm.roomType = props.row.roomType;
        ruleForm.type = props.row.type;

    }
})

</script>

<style lang="scss" scoped>
.formItemDiv {
    .el-input {
        width: 130px !important;
    }

    ::v-deep .el-input__wrapper {
        width: 225px !important;
    }
}

.el-textarea {
    width: 200px !important;
}

.el-input-group {
    width: 200px;
}

.el-select {
    width: 200px !important;
}

.el-input {
    width: 200px !important;
}

.demo-div {
    height: 600px;
    overflow-y: auto;

    p {
        margin: 0;
    }
}

::v-deep .el-input__wrapper {
    flex-grow: 0 !important;
}
</style>